<script setup>
import dayjs from "dayjs";
import { ref } from "vue";
import { ElMessageBox } from "element-plus";
import { message } from "@/utils/message";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { customer_abandoned_batch } from "@/api/customer";

import Building from "~icons/ri/building-2-line";

const props = defineProps({
  isBatch: {
    type: Boolean,
  },
});

const emit = defineEmits(["onSearch"]);

const detailInfo = ref(null);
const dialog = ref(false);

// 删除到废弃客池
const discardClick = () => {
  ElMessageBox.confirm("确定执行该操作？", "重要提示", {
    type: "warning"
  })
    .then(() => {
      customer_abandoned_batch({
        ids_json: `${detailInfo.value.id}:${detailInfo.value.table_at}:${detailInfo.value.version}`
      }).then(res => {
        if (res.code == 1000) {
          message(`操作成功！`, {
            type: "success"
          });
          setTimeout(() => {
            dialog.value = false;
            emit("onSearch");
          }, 1000);
        } else {
          message(res.msg, { type: "error" });
        }
      });
    })
    .catch(() => {});
};
const openDrawer = row => {
  detailInfo.value = row;
  dialog.value = true;
};

defineExpose({ openDrawer });
</script>

<template>
  <el-dialog v-model="dialog" title="客户信息" width="800">
    <div class="info">
      <div class="name">
        <IconifyIconOffline
          :icon="Building"
          style="color: #000000; width: 22px; height: 22px"
        />
        <p>{{ detailInfo.company_name || detailInfo.name }}</p>
      </div>

      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item :label-width="100" label-align="center">
          <template #label
            ><span style="font-weight: 400">法定代表人</span></template
          >
          {{ detailInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item :label-width="150" label-align="center">
          <template #label
            ><span style="font-weight: 400">社会统一信用代码</span></template
          >
          {{ detailInfo.code }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center">
          <template #label
            ><span style="font-weight: 400">成立日期</span></template
          >
          <!-- {{ detailInfo.establishmenttime || detailInfo.date }} -->
          {{ detailInfo.establishmenttime ? dayjs(detailInfo.establishmenttime).format("YYYY-MM-DD") : "" }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center">
          <template #label
            ><span style="font-weight: 400">注册资本</span></template
          >
          {{
            ( detailInfo.registered_capital ? `${detailInfo.registered_capital}万元人民币`: "") || detailInfo.capital
          }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center">
          <template #label
            ><span style="font-weight: 400">所属地区</span></template
          >
          {{ detailInfo.address_path }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center">
          <template #label
            ><span style="font-weight: 400">参保人数</span></template
          >
          {{ detailInfo.insured_num }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center">
          <template #label
            ><span style="font-weight: 400">员工规模</span></template
          >
          {{ detailInfo.employee_size }}
        </el-descriptions-item>
        <el-descriptions-item label-align="center">
          <template #label
            ><span style="font-weight: 400">注册地址</span></template
          >
          {{ detailInfo.address }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label-align='center'>
          <template #label><span style="font-weight: 400">国标行业</span></template>
          {{ detailInfo.national_standard_industry || detailInfo.classify }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label-align='center'>
          <template #label><span style="font-weight: 400">经营范围</span></template>
          {{ detailInfo.scope_of_experience || detailInfo.scope }}
        </el-descriptions-item>
        <el-descriptions-item :span="2" label-align='center' v-if="detailInfo.phone">
          <template #label><span style="font-weight: 400">联系电话</span></template>
          {{ detailInfo.phone }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
      <div class="dialog-footer" v-if="detailInfo.phone && isBatch">
        <el-button type="primary" :icon="useRenderIcon('ri:delete-bin-line')" @click="discardClick">删除到废弃客池</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
:deep(.el-dialog__title) {
  font-weight: bold;
}

.info {
  .name {
    display: flex;
    margin-bottom: 20px;

    p {
      font-size: 16px;
      color: #000;
      font-weight: bold;
      margin-left: 8px;
    }
  }
}
</style>
